<template>
  <div class="w-full h-full">
    <BoTable :columns="columns" :request="fetchList" height="auto" show-index>
      <template #toolbars>
        <span>123</span>
      </template>
      <template #leftContainer>
        <div class="w-100">hello</div>
      </template>
      <template #rightContainer>
        <div style="width: 50px">111111111111111</div>
      </template>
    </BoTable>
    <!-- <Table :columns="columns" :data-source="dataSource" :scroll="{ x: 200 }" /> -->
  </div>
</template>

<script lang="tsx" setup>
import { BoTable, BoTableProps } from '@/index';
import { computed, ref } from 'vue';
import { Table } from 'ant-design-vue';

const dataSource = ref(
  Array.from({ length: 5 }, (_, index) => {
    return {
      col: index,
    };
  }),
);

const fetchList = () => {
  return {
    rows: dataSource.value,
    total: 100,
  };
};

const columns = computed<BoTableProps['columns']>(() => {
  return [
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
    {
      dataIndex: 'col',
      width: 200,
      title: 'col',
    },
  ];
});
</script>

<style>
.page {
  width: 90vw;
  height: 90vh;
}
</style>
